<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
    <el-table
            border
            :data="roleInfos">
        <el-table-column
                prop="id"
                label="角色编号">
        </el-table-column>
        <el-table-column
                prop="rname"
                label="角色名称">
        </el-table-column>
        <el-table-column
                prop="stateName.state"
                label="角色状态">
        </el-table-column>
        <el-table-column
                prop=""
                label="">
            <template slot="header">
                <el-button type="success" plain  @click="addDialog()">添加角色</el-button>
            </template>
            <template slot-scope="scope">
                <el-button type="success" @click="getRoleInfo(scope.row.id)">修改信息</el-button>
                <el-button type="primary" @click="getRolePer(scope.row.id)">编辑权限</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="添加角色信息" :visible.sync="dialogAddForm">
        <el-form id="updateRoleInfoFrom" :model="addRole" :rules="rules" ref="addRoleInfo">
            <el-form-item label="角色名称" prop="rname" >
                <el-input v-model="addRole.rname" name="rname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="state" label="角色状态">
                <template>
                    <select style="width: 90px;" v-model="addRole.state" placeholder="请选择角色状态" name = "state">
                        <option  v-for="(g,i) in dstate"
                                 :label="g.state"
                                 :value="g.id">
                        </option>
                    </select>
                </template>
            </el-form-item>
            <el-form-item prop="permission" label="选择权限">
                <template>
                    <select style="width: 90px;" v-model="getPpermission" placeholder="请选择父级权限状态" name = "pPermission" @change="listPermission(getPpermission)">
                        <option  v-for="(g,i) in ppermission"
                                 :label="g.pname"
                                 :value="g.id">
                        </option>
                    </select>
                </template>
            </el-form-item>
            <template>
                <el-select v-model="addRole.value1" multiple placeholder="请选择子级权限" placeholder="请选择子级权限状态" name = "spermission">
                    <el-option
                            v-for="item in spermission"
                            :key="item.id"
                            :label="item.pname"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddForm = false">取 消</el-button>
            <el-button type="primary" @click="addRoleInfo()">添 加</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改角色信息" :visible.sync="dialogForm">
        <el-form id="updateRoleInfoFrom" :model="getRole" :rules="rules" ref="updateRoleInfo">
            <el-form-item label="编号" prop="id" style="display: none">
                <el-input v-model="getRole.id" name="id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="rname" >
                <el-input v-model="getRole.rname" name="rname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色状态" prop="state">
                <template>
                    <select style="width: 90px;" v-model="getRole.state" placeholder="请选择角色状态" name = "state">
                        <option  v-for="(g,i) in dstate"
                                 :label="g.state"
                                 :value="g.id">
                        </option>
                    </select>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="updateRoleInfo()">修 改</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改权限" :visible.sync="dialogFormVisible">
        <el-form id="updateRoleFrom" :model="getRole" :rules="rules" ref="updateRole">
            <el-form-item label="编号" prop="id" style="display: none">
                <el-input v-model="getRole.id" name="id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择权限" prop="permission">
                <template>
                    <select style="width: 90px;" v-model="getPpermission" placeholder="请选择父级权限状态" name = "pPermission" @change="listPermission(getPpermission)">
                        <option  v-for="(g,i) in ppermission"
                                 :label="g.pname"
                                 :value="g.id">
                        </option>
                    </select>
                </template>
            </el-form-item>
            <template>
                <el-select v-model="getRole.value1" multiple placeholder="请选择子级权限" placeholder="请选择子级权限状态" name = "spermission">
                    <el-option
                            v-for="item in spermission"
                            :key="item.id"
                            :label="item.pname"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateRole()">修 改</el-button>
        </div>
    </el-dialog>
</div>
<script>

    $.get("/demo/role/queryRole",function (backData) {
        haha.roleInfos = backData.data;
    });
    $.get("/demo/role/getPoption",function (backData) {
        haha.pOptions = backData.data;
    });

    var haha = new Vue({
        el: "#app",
        data: {
            addRole:{},
            dialogAddForm:false,
            dialogForm:false,
            getPpermission:"",
            ppermission:[],
            spermission:[],
            defaultProps: {
                label: 'pname',
                children : 'subMenu'
            },
            dstate:[],
            SOption:[],
            pOptions:[],
            value: [],
            roleInfos:[],
            getRole:{
                value1:[],
            },
            dialogFormVisible:false,
            state:{},
            rules:{
                rname: [
                    { required: true, message: '请输入角色姓名', trigger: 'blur' }
                ],
                state: [
                    { required: true, message: '请选择角色状态', trigger: 'blur' }
                ],
            },
            queryPermissionState:[]
        },
        methods: {
            addRoleInfo(){
                haha.$refs["addRoleInfo"].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url:"/demo/role/addRole",
                            type:"POST",
                            data:{
                                "rid":haha.addRole.value1.toString(),
                                "rname":haha.addRole.rname,
                                "rstate":haha.addRole.state,
                            },
                            dataType:"json",
                            success:function(backData){
                                if(backData.code == 1){
                                    haha.addRoleInfo=false;
                                    haha.$message.success('修改成功');
                                    window.location.reload();
                                }else {
                                    haha.$message.error(backData.msg);
                                }
                            }
                        });
                    }
                });
            },
            addDialog(){
                $.get("/demo/role/queryPpermission",function (backData) {
                    haha.ppermission = backData.data;
                });
                $.get("/demo/dept/queryDeptState",function (backData) {
                    haha.dstate = backData.data;
                });
                haha.dialogAddForm=true
            },
            updateRoleInfo(){
                haha.$refs["updateRoleInfo"].validate((valid) => {
                    if (valid) {
                        var updateRoleInfo = new FormData(updateRoleInfoFrom);
                        $.ajax({
                            url:"/demo/role/updateRoleInfo",
                            type:"POST",
                            data:updateRoleInfo,
                            processData:false,
                            contentType:false,
                            success:function(backData){
                                window.location.reload();
                                haha.dialogForm=false;
                            }
                        });
                    }
                });

            },
            updateRole(){
                haha.$refs["updateRole"].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url:"/demo/role/updateRole",
                            type:"POST",
                            data:{
                                "id":haha.getRole.value1.toString(),
                                "rid":haha.getRole.id
                            },
                            dataType:"json",
                            success:function(backData){
                                if(backData.code == 1){
                                    haha.updateDialogFormVisible=false;
                                    haha.$message.success('修改成功');
                                    window.location.reload();
                                }else {
                                    haha.$message.error(backData.msg);
                                }
                            }
                        });
                    }
                });
            },
            getRoleInfo(id){
                $.get("/demo/role/getRole/"+id,function (backData) {
                    haha.getRole = backData.data;
                    haha.state = backData.data.stateName;
                });
                $.get("/demo/dept/queryDeptState",function (backData) {
                    haha.dstate = backData.data;
                });
                haha.dialogForm=true
            },
            listPermission(getPpermission){
                $.get("/demo/role/listPermission/"+getPpermission,function (backData) {
                    haha.spermission = backData.data;
                });
            },
            listSOption(id){
                $.get("/demo/role/querySOption/"+id,function (backData) {
                    haha.SOption = backData.data;
                });
            },
            getRolePer(id){
                $.get("/demo/role/getRole/"+id,function (backData) {
                    haha.getRole = backData.data;
                });

                $.get("/demo/role/queryPermissionState/"+id,function (backData) {
                    haha.queryPermissionState = backData.data;
                });
                $.get("/demo/role/queryPpermission",function (backData) {
                    haha.ppermission = backData.data;
                });
                haha.dialogFormVisible = true
            }

        }
    })
</script>
</body>
</html>